<template>
  <div class="cart">
    <div v-if="cart.length">
      <van-swipe-cell
        v-for="prod in cart"
        :key="prod.id"
      >
        <van-card
          :price="prod.price"
          desc="描述信息"
          :title="prod.title"
          class="goods-card"
          :thumb="prod.image"
        >
        <template #num>
          <van-checkbox :value="prod.isChecked" class="checks" @click="toggleCheck(prod.id)"></van-checkbox>
         <van-stepper :value="prod.num" theme="round" button-size="22" integer  @change="changeAmount({id:prod.id,num:$event})"/>
        </template>
        </van-card>

        <template #right>
          <van-button square text="删除" type="danger" class="delete-button" @click="removeFromCart(prod.id)"/>
        </template>
      </van-swipe-cell>
      <van-submit-bar :price="totalMoney" button-text="提交订单"  class="tijiao">
        <van-checkbox :value="isAllChecked"  @click="toggleAllCheck(isAllChecked)" >全选</van-checkbox>
        <template #tip>
          你的收货地址不支持同城送,
          <span >修改地址</span>
        </template>
      </van-submit-bar>
    </div>
    <div v-else>
      <van-empty description="空空如也，快去将商品加入购物车吧" />
    </div>
  </div>
</template>

<script>
import { mapMutations, mapGetters, mapState } from 'vuex'
export default {
  name: 'Cart',
  computed: {
    ...mapState(['cart']), // 等同于cart()
    ...mapGetters(['isAllChecked', 'totalMoney'])
    // cart () {
    //   return this.$store.state.cart
    // }
  },
  methods: {
    ...mapMutations(['removeFromCart', 'changeAmount', 'toggleCheck', 'toggleAllCheck'])
  }
}
</script>

<style lang="less" scoped>
.cart{
  height: 100%;
  overflow-x: hidden;
  position: relative;
}
.goods-card {
  margin: 0;
  background-color: #fff;
}

.delete-button {
  height: 100%;
}
.tijiao {
   position: absolute;
  bottom: 0;
}
.checks {
  margin-left: 10px;
  position: absolute;
  top: 32px;
  right: 0;
}
</style>
